<template>
  <view class="cooperate-layout">
		<my-header title="商务合作"></my-header>
    <my-content class="content">
      <view class="box">
        <view class="item">
          <view class="label">
            <view class="label_red">*</view>
            <view>姓名</view>
          </view>
          <input class="input" placeholder="请输入姓名" v-model="params.nickname" />
        </view>
        <view class="item">
          <view class="label">
            <view class="label_red">*</view>
            <view>手机号</view>
          </view>
          <input type="number" placeholder="请输入手机号" class="input" v-model="params.mobile" />
        </view>
        <view class="item">
          <view class="label">
            <view class="label_red">*</view>
            <view>注明来意</view>
          </view>
          <textarea placeholder="请输入" type="textarea" maxlength="200" class="input text" v-model="params.content" />
          <view class="num_box">
            {{ params.content.length }}
            <text class="num">/{{ num }}</text>
          </view>
        </view>
      </view>
			<view style="flex: 1;"></view>
      <view class="submit" @click="submit()">提交</view>
    </my-content>
  </view>
</template>

<script>
import api from '../../api'
export default {
  data() {
    return {
      params: {
        nickname: '',
        content: '',
        mobile: '',
      },
      num: 200,
    }
  },
  onLoad(option) {},
  onShow() {},

  methods: {
    submit() {
      if (!this.params.nickname || !this.params.mobile || !this.params.content) {
        this.show('请完善表单')
        return
      }
      if (this.params.mobile.length != 11) {
        this.show('请输入正确的手机号')
        return
      }
      if (this.params.content.length > 200) {
        this.show('备注最多200字')
        return
      }
      uni.showLoading({
        title: '提交中',
      })
      api.cooperates
        .store(this.params)
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            this.show(res.msg)
            uni.navigateBack()
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss">
.content {
  height: 100vh;
  background-color: #141414;
	display: flex;
	flex-direction: column;
  .box {
    display: flex;
    flex-direction: column;

    width: 700rpx;
    margin: 0 auto;
    .item {
      display: flex;
      flex-direction: column;
      position: relative;
			color: white;
			margin-bottom: 20rpx;
      .label {
        display: flex;
        align-items: center;
        .label_red {
          font-size: 36rpx;
          color: red;
          margin-right: 5rpx;
        }
      }
      &:first-child {
        margin-top: 60rpx;
      }
      .input {
        width: 680rpx;
        height: 60rpx;
        padding: 20rpx;
        margin: 20rpx 0;
        background-color: #1f1f1f;
        &.text {
          height: 300rpx;
        }

				&::placeholder {
					font-size: 16rpx;
					color: #808080;
				}
      }
      .num_box {
        bottom: 30rpx;
        position: absolute;
        right: 10rpx;
				color: red;
				font-size: 26rpx;
        .num {
          color: #808080;
        }
      }
    }
  }

  .submit {
    width: 610rpx;
    margin: 40rpx auto;
    height: 84rpx;
    line-height: 84rpx;
    text-align: center;
    border-radius: 10rpx;
    color: #fff;
		background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary.png');
		background-size: 100% 100%;
  }
}
</style>
